<template>
  <el-scrollbar style="height: 100%" >
    <div class="ns-tree-com tree-com" >
      <el-dialog title="文件夹重命名" :visible.sync="dialogFormVisible" center :close-on-click-modal=false	>
        <el-form :model="form">
          <el-form-item label="原名称" label-width="60px">
            <el-input size="medium" class="mye_input" v-model="form.oldName" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="新名称" label-width="60px">
            <el-input size="medium" class="mye_input" v-model="form.newName" autocomplete="off"></el-input>
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button size="medium"  type="goon" round    @click="dialogFormVisible = false">取 消</el-button>
          <el-button size="medium"  type="goon" round   @click="[dialogFormVisible = false,update()]">确 定</el-button>
        </div>
      </el-dialog>
      <el-dialog title="新建文件夹" :visible.sync="dialogForm2Visible" center :close-on-click-modal=false	>
        <el-form :model="form">
          <el-form-item label="文件夹名称" label-width="90px">
            <el-input size="medium" class="mye_input" v-model="form.newRootName" autocomplete="off"></el-input>
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button size="medium"  type="goon" round    @click="dialogForm2Visible = false">取 消</el-button>
          <el-button size="medium"  type="goon" round   @click="updateNewRootName">确 定</el-button>
        </div>
      </el-dialog>
      <el-dialog title="新建文件夹" :visible.sync="dialogForm3Visible" center :close-on-click-modal=false	>
        <el-form :model="form">
          <el-form-item label="文件夹名称" label-width="90px">
            <el-input size="medium" class="mye_input" v-model="form.newChildNode" autocomplete="off"></el-input>
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button size="medium"  type="goon" round    @click="dialogForm3Visible = false">取 消</el-button>
          <el-button size="medium"  type="goon" round   @click="updateChildNode">确 定</el-button>
        </div>
      </el-dialog>
      <el-dialog title="提示" :visible.sync="dialogForm4Visible"      center :close-on-click-modal=false	>
        <span>确认是否删除</span> <span class="catalogName">{{  catalog  }}</span> <span>目录以及该目录下的子目录</span>
        <div slot="footer" class="dialog-footer">
          <el-button size="medium"  type="goon" round   @click="dialogForm4Visible = false">取 消</el-button>
          <el-button size="medium"  type="goon" round   @click="deleteNodeFinal">确 定</el-button>
        </div>
      </el-dialog>
      <el-input class="filterinpput"
                placeholder="输入关键字进行目录筛选"
                v-model="filterText"
                size="medium"
      >
      </el-input>

      <el-button @click="addRoot" class="addRootDir" round  size="mini" type="goon"><i class="el-icon-circle-plus el-icon--left"></i>添加根目录</el-button>
      <!--        <el-button @click="updateDir" class="updateButton"  size="mini" type="success"><i class="el-icon-refresh el-icon&#45;&#45;left"></i>更新目录</el-button>-->
      <el-tree
        :indent="0"
        :data="datas"
        node-key="id"
        v-loading="loading"
        element-loading-text="目录加载中"
        :expand-on-click-node="false"
        default-expand-all
        :filter-node-method="filterNode"
        @node-click="handleNodeClick"
        ref="tree">
        <!--        @node-click="handleNodeClick"-->
        <div class="custom-node" slot-scope="{node, data}">
          <div class="node-left">
            <el-input v-if="data.edit" size="mini" v-model="curText"></el-input>
            <span  v-else   style="margin-left: 7px;">{{data.parent.catalogName}}</span>
          </div>

          <div class="node-right">
            <template v-if="data.edit">
              <!--                        <el-button type="text" @click="cancel(node, data)">取消</el-button>-->
              <!--                        <el-button type="text" @click="sure(node, data)">确定</el-button>-->
            </template>
            <template v-else>
              <el-button type="text" icon="el-icon-edit"    size="mini"    @click.stop="editNode(node, data)" ></el-button>
              <el-button type="text" icon="el-icon-plus"    size="mini"    @click.stop="addChild(node, data)"></el-button>
              <el-button type="text" icon="el-icon-delete"  size="mini"    @click.stop="deleteNode(node, data)"></el-button>
            </template>
          </div>
        </div>
      </el-tree>

    </div>
  </el-scrollbar>
</template>

<script>
import {createNamespacedHelpers} from 'vuex'
const {mapState,mapGetters} = createNamespacedHelpers('dirmanage')
export default {
  name: 'DirCatalogTo',
  mounted() {
    this.$store.dispatch('dirmanage/getCatlogData')
    this.$store.dispatch('dirmanage/getCatlog')
    var requestParams={
        pageNumber:1,
          pageSize:15,
          code:'',
          name:'',
          catalogId:1
      }
    // var catalogIdDataList = [1,2,3,4]
    // if (this.link === '/theVector'){
    requestParams.name = window.sessionStorage.getItem('shiName')
    this.$store.commit('dirmanage/getCurrentCatalogId',requestParams.catalogId)
    this.$store.commit("dirmanage/resetVectorBreadCrumbs",['生态保护红线'])
    this.$store.dispatch('dirmanage/getAttributeInfo',requestParams)
    // }
    // else if (this.link ==='/theText'){
    //   this.$store.commit("dirmanage/resetTextBreadCrumbs",["生态保护红线"])
    //   this.$store.dispatch('dirmanage/getAttributeInfo',{catalogIds:catalogIdDataList,achievementsTypeId:'2'})
    // }
  },
  computed:{
    ...mapGetters(['datas']),
    ...mapState(['loading']),
    ...mapGetters(['catlogRootId']),
    ...mapGetters(['documentIdLists']),
    ...mapGetters(['link']),
    ...mapGetters(['catalogLists']),
  },
  data () {
    return {
      catalog:"",
      node:"",
      nodedata:"",
      childNode:"",
      childData:"",
      filterText: '',
      curNode: {},
      curText: '',
      dialogTableVisible: false,
      dialogFormVisible: false,
      dialogForm2Visible: false,
      dialogForm3Visible: false,
      dialogForm4Visible: false,
      deleteNodes:[],
      deleteDatas:[],
      requestParams:{
        pageNumber:1,
        pageSize:15,
        code:'',
        name:'',
        catalogId:''
      },
      form: {
        oldName: '',
        newName: '',
        newRootName:"",
        newChildNode:""
      },
      formLabelWidth: '100px'
    }
  },
  props: {
    data: {
      type: Array,
      require: true
    }
  },
  model: {
    prop: 'data'
  },
  watch: {
    filterText(val) {
      this.$refs.tree.filter(val);
    },
    data (val) {
      this.$emit('input', val)
    },
  },
  methods: {
    // 模糊搜索
    filterNode(value, data) {
      if (!value) return true;
      return data.parent.catalogName.indexOf(value) !== -1;
    },
    // 添加根目录
    addRoot(){
      this.dialogForm2Visible = true
    },
    updateNewRootName(){
      this.dialogForm2Visible = false
      var  newRootData = {}
      var  level = 1
      var  upLevelId = 0
      var  catalogName = this.form.newRootName
      if (catalogName){
        newRootData={
          level:level,
          upLevelId:upLevelId,
          catalogName:catalogName
        }
        this.$store.commit('dirmanage/addDatalist',{'parent':newRootData})
        this.updateRootCatalog()
      }
      else {
        this.$message.error('文件夹名称不能为空!')
      }
    },
    updateRootCatalog(){
      this.$store.dispatch('dirmanage/addRootCatalog')
    },
    // 编辑目录名称
    editNode (node, data) {
      this.dialogFormVisible = true
      this.form.oldName = data.parent.catalogName
      this.node = node
      this.nodedata = data
      this.form.newName = ''
    },
    // 编辑目录名称完成后 进行更新
    update(){
      if (this.form.newName) {
        this.$store.commit('dirmanage/editCatlogName',{data:this.nodedata,newName:this.form.newName})
        this.updateCatalog()
      } else {
        this.$message.error('文件夹名称不能为空！！')
      }
    },
    // 更新数据库
    updateCatalog(){
      this.$store.dispatch('dirmanage/updateCatlog')
    },
    updateDir(){
      console.log(this.datas)
    },
    addChild (node, data) {
      this.dialogForm3Visible = true
      this.childNode = node
      this.childData = data
      this.form.newChildNode = ''
    },
    updateChildNode() {
      this.dialogForm3Visible = false
      console.log(this.childNode,this.childData)
      var level = this.childData.parent.level + 1
      var upLevelId = this.childData.parent.id
      var catalogName = this.form.newChildNode
      if (catalogName){
        var childNode = {
          level:level,
          upLevelId:upLevelId,
          catalogName:catalogName
        }
        this.$store.commit('dirmanage/addChildData',{'parent':childNode})
        this.updateTree()
      }
      else {
        this.$message.error('文件夹名称不能为空!')
      }
    },
    updateTree(){
      this.$store.dispatch('dirmanage/addRootCatalog')
    },
    deleteNode ( node,data) {
      this.dialogForm4Visible = true
      this.deleteNodes = node
      this.deleteDatas = data
      console.log(data)
      this.catalog = data.parent.catalogName
    },
    deleteNodeFinal (){
      var id = this.deleteDatas.parent.id
      this.$store.dispatch('dirmanage/deleteCatlog',id)
      this.dialogForm4Visible = false
    },
    handleNodeClick(data) {
      console.log(data.parent.id)
      var doucumentIdList = []
      var catalogIdList = []
      const CurrentCode = data.parent.code
      var codeList = []
      for(var j = 0;j<CurrentCode.length;j++){
        codeList.push(CurrentCode.substr(0,j+1))
      }

      // console.log(this.catalogLists)
      for (var i = 0;i<codeList.length;i++){
        for (var n =0;n<this.catalogLists.length;n++){
          if (this.catalogLists[n].code === codeList[i]){
            doucumentIdList.push(this.catalogLists[n].catalogName)
          }
        }
      }
      this.$store.commit("dirmanage/resetVectorBreadCrumbs",doucumentIdList)
      this.requestParams.catalogId = data.parent.id
      if (data.parent.id>20 && data.parent.id<25){
        this.$store.commit('dirmanage/changeTable',false)
      }
      else{
        this.$store.commit('dirmanage/changeTable',true)
      }
      this.$store.commit('dirmanage/getCurrentCatalogId',data.parent.id)
      this.$store.commit('dirmanage/getCurrentPageNumber',1)
      this.requestParams.name = window.sessionStorage.getItem('shiName')
      this.$store.dispatch('dirmanage/getAttributeInfo',this.requestParams)
    }

  }


}
</script>
<style scoped lang="scss">
::v-deep.el-scrollbar .el-scrollbar__wrap {overflow-x: hidden;}
.catalogName{
  color: red;
}
::v-deep.el-button+.el-button{
  margin-left: 5px;
}
.node-left{
  width: 100px;
}
.el-form{

}
::v-deep .el-dialog__header{
  padding: 10px;
}
::v-deep .el-dialog__title{
  font-size: 16px;
}
::v-deep.el-form-item{
  margin-bottom: 10px;
}
::v-deep.mye_input{
  width: 100%;
}
::v-deep .el-dialog{
  position:absolute;
  left:26%;
  border-radius: 2px;
  box-shadow: 0 1px 3px rgba(0,0,0,.3);
  box-sizing: border-box;
  width: 300px;
}
::v-deep .el-dialog__body{
  padding: 15px;
}
.filterinpput{

}
.addRootDir{
  color: #100f0f;
  margin-top: 10px;
}

::v-deep.el-dialog__headerbtn{
  top:15px
}
::v-deep.el-tree-node__content .el-tree-node__expand-icon{
  padding: 0;

}
::v-deep .el-tree-node__content{
  height: 21px;
}
::v-deep .ns-tree-com.tree-com{
  padding:8px;
  $icon-width: 18px;
  $line-color: #969696;
  overflow: hidden;
  @mixin lineTopLeft {

  }
  .el-tree{
    padding-top: 10px;
    padding-left: 20px;
    &>.el-tree-node{
      &:before{border-left: none !important;}
    }
    .el-tree-node{
      position: relative;
      padding: 2px;
      &:last-child:before {
        /*height: 20px;*/
      }
      &:before{
        @include lineTopLeft;
        bottom: 0;
        height: 100%;
        top: -26px;
        width: 1px;
      }
      &:after{
        @include lineTopLeft;

        height: 20px;
        top: 12px;
        width: 24px;
      }
      .el-tree-node__content{
        padding: 3px;

      }
      .el-tree-node__content:hover{
        .node-right{
          display: block;
        }
      }
    }
    .el-tree-node__children{
      padding-left: 12px;
    }
  }
  .el-tree-node__expand-icon{
    width: $icon-width;
    height: $icon-width;
    padding: 0;
    &.is-leaf{
      &.el-icon-caret-right{
        background-image: url("../../assets/img/dir.png");
      }
    }
    &.expanded{
      transform: rotate(0deg);
      &.el-icon-caret-right{
        background-image: url("../../assets/img/expand.png");
      }
    }
    &.el-icon-caret-right{
      &::before{content: '';}
      background-image: url("../../assets/img/close2.png");
      background-size: 18px;
    }
  }
  .custom-node {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 14px;
    padding-right: 8px;
    .node-right{
      display: none;
    }
  }
}
/*::v-deep .el-table__body-wrapper::-webkit-scrollbar {*/
/*  width:6px;!* 滚动条的宽高 必须项 *!*/
/*  height: 5px;*/
/*}*/

/*::v-deep .el-table__body-wrapper::-webkit-scrollbar-thumb {*/
/*  background-color: #bfcbd9;!* 滚动条的宽 *!*/
/*  border-radius: 3px;*/
/*}*/
::v-deep .el-input__inner{
  margin-left: 15%;
  width: 70%;
  border-radius: 45px;
}

::v-deep .el-button--goon:focus, .el-button--goon:hover {
  color: #fff;
  border-color: #c6e2ff;
  background: -webkit-linear-gradient(left,#3ee8c2,#25e4a3);
}
::v-deep .el-button--goon:active {
  color: #fff;
  border-color: #c6e2ff;
  outline: 0;
}
::v-deep .el-dialog__title {
  font-weight: bold;
  //font-size: 20px;
  color: #45524f;
}
::v-deep .el-dialog__headerbtn{
  top: 13px;
}

</style>
